<!-- #layout name=blank -->
<div id="app">
  <div class="page-header">
    <h1 class="title">Key-Value Store</h1>
  </div>
  <kb-breadcrumb :breads="breads"></kb-breadcrumb>
  <div class="navbar navbar-default">
    <div class="container-fluid">
      <a
        @click="showEditModal=true;isNewStore=true"
        class="btn green navbar-btn"
        >New</a
      >
      <a v-if="selectedRows.length" @click="onDelete" class="btn red navbar-btn"
        >Delete</a
      >
    </div>
  </div>
  <kb-table :data="model" show-select :selected.sync="selectedRows">
    <kb-table-column :label="Kooboo.text.site.label.key" prop="key">
    </kb-table-column>
    <kb-table-column :label="Kooboo.text.site.label.value" prop="value">
    </kb-table-column>
    <kb-table-column align="right" width="100px">
      <template v-slot="row">
        <a class="btn btn-ms blue" @click.stop="onEdit(row)">{{
          Kooboo.text.common.edit
        }}</a>
      </template>
    </kb-table-column>
  </kb-table>
  <div
    id="modal"
    class="modal fade"
    data-backdrop="static"
    data-keyboard="false"
    v-kb-modal="showEditModal"
  >
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button class="close" data-dismiss="modal"
            ><i class="fa fa-close"></i
          ></button>
          <h4 class="modal-title">{{
            isNewStore ? Kooboo.text.common.new : Kooboo.text.common.edit
          }}</h4>
        </div>
        <div class="modal-body" v-if="showEditModal">
          <kb-form
            :model="createModel"
            :rules="createModelRules"
            ref="createForm"
          >
            <kb-form-item prop="key">
              <label class="control-label col-md-2">Key</label>
              <div class="col-md-10">
                <p v-if="!isNewStore" class="form-control-static">{{
                  createModel.key
                }}</p>

                <input
                  v-else
                  type="text"
                  class="form-control"
                  v-model="createModel.key"
                />
              </div>
            </kb-form-item>
            <kb-form-item prop="value">
              <label class="control-label col-md-2">Value</label>
              <div class="col-md-10">
                <textarea
                  class="form-control autosize"
                  v-model="createModel.value"
                ></textarea>
              </div>
            </kb-form-item>
          </kb-form>
        </div>
        <div class="modal-footer">
          <button class="btn green" @click="saveEditing">Save</button>
          <button class="btn gray" data-dismiss="modal">Cancel</button>
        </div>
      </div>
    </div>
  </div>
</div>
<script>
  (function() {
    Kooboo.loadJS([
      "/_Admin/Scripts/lib/jquery.textarea_autosize.min.js",
      "/_Admin/Scripts/components/kbBreadcrumb.js",
      "/_Admin/Scripts/components/kbForm.js",
      "/_Admin/Scripts/components/kbTable.js"
    ]);
  })();
  new Vue({
    el: "#app",
    data: function() {
      var me = this;
      return {
        breads: [
          {
            name: "SITES"
          },
          {
            name: "DASHBOARD"
          },
          {
            name: Kooboo.text.common.KeyValueStore
          }
        ],
        showEditModal: false,
        selectedRows: [],
        model: [],
        isNewStore: false,
        createModel: {
          key: "",
          value: ""
        }
      };
    },
    mounted: function() {
      this.getList();
    },
    computed: {
      createModelRules: function() {
        var me = this;
        rules = {
          value: [{ required: Kooboo.text.validation.required }]
        };
        if (this.isNewStore) {
          rules.key = [
            { required: Kooboo.text.validation.required },
            {
              pattern: /^([A-Za-z][\w\-\.]*)*[A-Za-z0-9]$/,
              message: Kooboo.text.validation.objectNameRegex
            },
            {
              remote: {
                url: Kooboo.KeyValue.isUniqueName(),
                data: function() {
                  return {
                    name: me.createModel.key
                  };
                }
              },
              message: Kooboo.text.validation.taken
            }
          ];
        }
        return rules;
      }
    },
    methods: {
      onDelete: function() {
        var me = this;
        var ids = this.selectedRows.map(function(m) {
          return m.key;
        });

        if (!confirm(Kooboo.text.confirm.deleteItems)) return;

        Kooboo[Kooboo.KeyValue.name]
          .Deletes({
            ids: ids
          })
          .then(function(res) {
            if (res.success) {
              me.getList();
              window.info.done(Kooboo.text.info.delete.success);
            } else {
              window.info.done(Kooboo.text.info.delete.fail);
            }
          });
      },
      getList: function() {
        var me = this;
        Kooboo.KeyValue.getList().then(function(res) {
          if (res.success) {
            me.model = Kooboo.objToArr(res.model);
          }
        });
      },
      saveEditing: function() {
        var me = this;
        if (this.$refs.createForm.validate()) {
          Kooboo.KeyValue.Update(this.createModel).then(function(res) {
            if (res.success) {
              me.showEditModal = false;
              window.info.done(Kooboo.text.info.update.success);
              me.getList();
            }
          });
        }
      },
      onEdit: function(row) {
        this.createModel = row;
        this.isNewStore = false;
        this.showEditModal = true;
      }
    },
    watch: {
      showEditModal: function(value) {
        if (!value) {
          this.createModel = {
            key: "",
            value: ""
          };
        }
      }
    }
  });
  $("#modal").on("shown.bs.modal", function() {
    $(".autosize")
      .textareaAutoSize()
      .trigger("keyup");
  });
</script>
